<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-11-06 16:54:27
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-12-24 10:02:19
 * @FilePath: \sr_system_manager_ui\src\components\SearchBar\index.vue
 * @Description: 搜索条件组件
-->

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { SearchBarComponent } from '@/types/component'

const props = defineProps({
  /* 是否展开搜索框 */
  expandStatus: {
    type: Boolean,
    default: false,
  },
  /* 传入的组件 */
  components: {
    type: Array as () => SearchBarComponent[],
    default: []
  },
  /* 隐藏右边按钮区域 */
  hideRightArea: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['search'])

// 搜索条件的参数
const params = ref<any>({})
const expandRef = ref()
// 是否为展开状态
const expandStatus = ref(props.expandStatus)

// 清空搜索条件
const clearAllConditions = () => {
  Object.keys(params.value).forEach((key: string) => {
    params.value[key] = undefined
  })
  emits('search', params.value)
}

// 搜索
const searchEvent = () => {
  emits('search', params.value)
}

watch(
  () => props.components,
  () => {
    if (props.components.length > 0) {
      props.components.forEach((component: SearchBarComponent) => {
        if (component.key) {
          params.value[component.key] = component.cValue ?? undefined
        }
      })
    }
  }, {
    immediate: true
  }
)

defineExpose({
  clearAllConditions,
  params: params.value
})
</script>

<template>
  <div id="mySearchBar" :class="expandStatus ? 'search-bar-expand' : 'search-bar-abstract'">
    <div :class="!expandStatus ? 'show-more': ''">
      <div ref="expandRef" class="abstract-row">
        <div v-for="component in props.components" :key="component.key" class="lab-item" :style="{marginBottom: expandStatus ? '12px' : '0'}">
          <!-- 输入搜索框 -->
          <el-input
            v-if="component.type === 0"
            v-model="params[component.key]"
            :maxlength="component.config?.maxLength"
            :placeholder="component.placeholder ?? '请输入内容'"
            suffix-icon="Search"
            clearable
            v-bind="component.config"
            :style="{ width: component.width ?? '220px' }"
            @blur="searchEvent"
          />
          <!-- 下拉选择框 -->
          <el-select
            v-if="component.type === 1 && component.config"
            v-model="params[component.key]"
            collapse-tags clearable
            :placeholder="component.placeholder ?? '请选择'"
            v-bind="component.config"
            :style="{ width: component.width ?? '220px' }"
            @change="searchEvent"
          >
            <el-option
              v-for="option in component.config.options"
              :key="option.value"
              :label="option.title"
              :value="option.value">
            </el-option>
          </el-select>
          <!-- 日期选择器 -->
          <el-date-picker
            v-if="component.type === 2"
            v-model="params[component.key]"
            :type="(component.config && component.config.type) ? component.config.type : 'daterange'"
            :value-format="(component.config && component.config.valueFormat) ? component.config.valueFormat : 'YYYY-MM-DD'"
            align="right"
            unlink-panels
            range-separator="-"
            :placeholder="component.placeholder ?? '请选择'"
            :start-placeholder="component.startPlaceholder ?? '开始时间'"
            :end-placeholder="component.endPlaceholder ?? '结束时间'"
            v-bind="component.config"
            :style="{ width: component.width ?? '320px' }"
            @change="searchEvent"
          >
          </el-date-picker>
        </div>
      </div>
    </div>
    <div class="btn-expand">
      <slot name="rightArea">
        <div v-if="!props.hideRightArea">
          <el-button class="abstract-clean-icon" @click="clearAllConditions()">
            <i class="iconfont icon-Property2qingshu mr-[4px]" />
            清空
          </el-button>
          <el-button v-if="expandRef?.offsetHeight > 32" class="abstract-operate-icon" :icon="!expandStatus ? 'ArrowDown' : 'ArrowUp'"  @click="expandStatus = !expandStatus">
            {{ expandStatus ? '收起' : '展开' }}
          </el-button>
        </div>
      </slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/styles/variables.module.scss";
  /* 搜索框 */
  :deep(.el-input__inner),
  :deep(.el-select__wrapper),
  :deep(.el-range-editor--large.el-input__wrapper) {
    height: 32px;
  }
  :deep(.el-input__wrapper) {
    padding: 0px 11px;
    border-radius: 4px;
  }
  :deep(.el-select--large .el-select__wrapper) {
    min-height: 32px;
  }

  /* 收起状态下的搜索框 */
  .search-bar-abstract {
    height: 32px;
    max-width: 100%;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr auto; /* 左侧自动扩展，右侧自适应 */
    background-color: white;
  }
  /* 摘要内容 */
  .abstract-row {
    margin-right: 8px;
    // grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }
  /* 展开按钮 */
  .btn-expand {
    grid-column: 2; /* 将子组件放置在第二列 */
    margin-left: 8px;
    display: flex;
    flex-direction: row;
  }

  /* 展开状态下的搜索框 */
  .search-bar-expand {
    display: grid;
    grid-template-columns: 1fr auto; /* 左侧自动扩展，右侧自适应 */
    height: auto;
    min-height: 32px;
    max-width: 100%;
    border-radius: 4px;
    background-color: white;
  }
  /* 展开状态下搜索框中显示内容的区域 */
  .container-expand {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .lab-item{
    @apply: mr-[16px];
    &:last-child{
      @apply: m-0;
    }
  }
  .show-more{
    @apply: h-[32px] overflow-hidden;
  }
  /* 针对第一行的第一个元素，使用伪类选择器来重置左边距 */
  .container-expand > *:first-child {
    margin-left: 0;
  }
  .expand-clean-icon,
  .abstract-clean-icon {
    width: 80px;
    height: 32px;
    color: #4E5969;
    border: 1px solid #E5E6EB;
    margin-right: 4px;
  }
  .expand-operate-icon,
  .abstract-operate-icon {
    @apply: w-[52px] h-[32px] rounded-0 border-0 text-[$--color-primary];
  }
  /* 清空按钮的svg图标 */
  .design-iconfont {
    margin-right: 5.5px;
  }
</style>